<template>
  <div>
    <div class="amis-scope amis-routes-wrapper">
      <div class="antd-Page">
        <div class="antd-Page-content">
          <div class="antd-Page-main">
            <div class="antd-Page-header"><h2 class="antd-Page-title"><span class="antd-TplField"><span>首页</span></span>
            </h2></div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: center">
      <a-card style="width: 100%;" class="st-content">
        <a-row :gutter="24" style="margin-top: 8px">
          <a-col class="gutter-row" :span="6">
            <div class="card-box bg1">
              <div class="card-box-flex row1">
                <div class="icon icon-enterprise"></div><div class="name">生产企业</div>
              </div>
              <div class="card-box-flex row2">
                <div class="value">{{statistics.enterpriseNum}}</div>
                <div class="unit">家</div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div class="card-box bg2">
              <div class="card-box-flex row1">
                <div class="icon icon-farmer"></div><div class="name">养殖户</div>
              </div>
              <div class="card-box-flex row2">
                <div class="value">{{statistics.farmersNum}}</div>
                <div class="unit">人</div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div class="card-box bg3">
              <div class="card-box-flex row1">
                <div class="icon icon-expert"></div><div class="name">专家</div>
              </div>
              <div class="card-box-flex row2">
                <div class="value">{{statistics.expertNum}}</div>
                <div class="unit">人</div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div class="card-box bg4">
              <div class="card-box-flex row1">
                <div class="icon icon-nsycls"></div><div class="name">奶山羊存栏量</div>
              </div>
              <div class="card-box-flex row2">
                <div class="value">{{statistics.milkGoatNum}}</div>
                <div class="unit">只</div>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="margin-top: 24px;margin-bottom: 8px">
          <a-col class="gutter-row" :span="6">
            <div class="card-box bg4">
              <div class="card-box-flex row1">
                <div class="icon icon-mrycls"></div><div class="name">泌乳羊存栏量</div>
              </div>
              <div class="card-box-flex row2">
                <div class="value">{{statistics.lactatingSheepNum}}</div>
                <div class="unit">只</div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div class="card-box bg3">
              <div class="card-box-flex row1">
                <div class="icon icon-zgycls"></div><div class="name">种公羊存栏量</div>
              </div>
              <div class="card-box-flex row2">
                <div class="value">{{statistics.breedingRamNum}}</div>
                <div class="unit">只</div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div class="card-box bg2">
              <div class="card-box-flex row1">
                <div class="icon icon-ljcnl"></div><div class="name">累计产奶量</div>
              </div>
              <div class="card-box-flex row2">
                <div class="value">{{statistics.milkYieldSum}}</div>
                <div class="unit">吨</div>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="6">
            <div class="card-box bg1">
              <div class="card-box-flex row1">
                <div class="icon icon-ljslxhl"></div><div class="name">累计饲料消耗量</div>
              </div>
              <div class="card-box-flex row2">
                <div class="value">{{statistics.cumulativeFeedSum}}</div>
                <div class="unit">吨</div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <div style="display: flex;justify-content: center">
      <a-card style="width: 100%;margin-top: 24px" class="amis-scope st-content">
         <div slot="title" style="display: flex;justify-items: center;justify-content: space-between;align-items: center">
           <div class="title">待办事项</div>
           <div class="more" @click="gotoMore">更多<a-icon type="right" /></div>
         </div>
        <div>
          <backlog-list></backlog-list>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import {backlog} from '../../../services/index'
import huifuSvg from '../../../../public/svg/huifu.svg'
import shenheSvg from '../../../../public/svg/shenhe.svg'
import shjlSvg from '../../../../public/svg/shjl.svg'
import BacklogList from "./BacklogList";
export default {
  name: "index",
  components: {BacklogList},
  data () {
    return {
      huifuSvg,
      shenheSvg,
      shjlSvg,
      statistics: {},
      dataList: [],
      columns: [
        {
          title: '序号',
          customRender: (value, row, index) => {
            return index+1
          }
        },
        {
          title: '标题名称',
          dataIndex: 'typeName',
        },
        {
          title: '状态',
          scopedSlots: { customRender: 'applyAuditStatus' },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      loading: false,
    }
  },
  created() {
    this.queryStatistics()
  },
  methods:{
    gotoMore () {
      this.$router.push({
        path: 'backlog'
      })
    },
    queryStatistics(){
      backlog.queryStatistics().then(res=>{
        this.statistics = Object.assign({}, this.statistics, res.data.data)
      })
    },
    gotoPage (data) {
      if(data.typeCode=="T000010_APPLY_TYPE_COMPLAINTS_SUGGESTIONS"){
        this.$router.push({
          path: 'complaintReply',
          query:{
            id: data.applyId
          }
        })
      }else{
        console.log(data)
      }
    }
  }
}
</script>

<style lang="less">
.st-content {
  .card-box {
    width: 100%;
    height: 180px;
    background-size: 100% 100%;
    .row1 {
      padding-top: 31px;
      padding-left: 24px;
    }
    .card-box-flex {
      display: flex;
      align-items: center;
    }
    .row2 {
      flex-flow: row nowrap;
      justify-content: space-between;
      padding: 0 24px;
      padding-top: 40px;
    }
    .icon {
      width: 36px;
      height: 36px;
      background-size: 100% 100%;
    }
    .name {
      font-size: 18px;
      font-weight: 500;
      color: #FFFFFF;
      margin-left: 12px;
    }
    .unit {
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
    }
    .value {
      font-size: 36px;
      height: 42px;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 42px;
    }
    .icon-enterprise {
      background-image: url("~@/assets/img/icon-enterprise.png");
    }
    .icon-farmer {
      background-image: url("~@/assets/img/icon-farmer.png");
    }
    .icon-expert {
      background-image: url("~@/assets/img/icon-expert.png");
    }
    .icon-nsycls {
      background-image: url("~@/assets/img/icon-nsycls.png");
    }
    .icon-mrycls {
      background-image: url("~@/assets/img/icon-mrycls.png");
    }
    .icon-zgycls {
      background-image: url("~@/assets/img/icon-zgycls.png");
    }
    .icon-ljcnl {
      background-image: url("~@/assets/img/icon-ljcnl.png");
    }
    .icon-ljslxhl {
      background-image: url("~@/assets/img/icon-ljslxhl.png");
    }
  }

  .bg1 {
    background-image: url("~@/assets/img/bg1.png");
  }
  .bg2 {
    background-image: url("~@/assets/img/bg2.png");
  }
  .bg3 {
    background-image: url("~@/assets/img/bg3.png");
  }
  .bg4 {
    background-image: url("~@/assets/img/bg4.png");
  }
  .ant-card-head-title {
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .more {
      color: #999999;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
    }
  }
}

</style>
